<template>
  <a-descriptions :column="1" :bordered="true">
    <a-descriptions-item label="试运行结果">
      <div v-html="resultStatus"></div>
    </a-descriptions-item>
    <a-descriptions-item label="特征列表">
      <a-collapse>
        <a-collapse-panel header="输入特征列表">
          <a-table :columns="columns" :data-source="dataSource"></a-table>
        </a-collapse-panel>
      </a-collapse>
    </a-descriptions-item>
    <a-descriptions-item label="输出结果">
      <pre>{{ result }}</pre>
    </a-descriptions-item>
  </a-descriptions>
</template>

<script>
export default {
  name: 'TestResult',
  props: {
    testResult: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeKey: '1',
    }
  },
  computed: {
    dataSource() {
      if (!this.testResult.success) {
        return []
      }
      return this.testResult.data.feature || []
    },
    columns() {
      return [
        {
          title: 'name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'value',
          dataIndex: 'defaultValue',
          key: 'defaultValue',
        },
      ]
    },
    resultStatus() {
      if (this.testResult.success) {
        return `<div>成功</div>`
      }
      return `<div><div>失败</div><div>失败原因:</div><div>${this.testResult.message}</div></div>`
    },
    result() {
      if (this.testResult.success) {
        return JSON.stringify(this.testResult.data.result)
      }
      return ''
    },
  },
}
</script>

<style lang="less" scoped></style>
